import React from 'react';
import QRCode from 'qrcode.react';
import * as LOGIN_API from "../../../portal4theme/apis/login";
import {getDefaultPathname, setLSValue} from "../../../portal4theme/util/loginUtil";
import {WeaTools} from "ecCom";
import {toJS} from "mobx";
const { ua } = WeaTools;
class E8QRCode extends React.Component {
    constructor(props) {
        super(props)
    }

    state = {
        qrcodetimes:0
    }

    componentDidMount() {
        const {cacheAccount:loginId, langId} = this.props.state.data;
        this.props.getLoginForm({loginId, langId});

        this.getQRCode();
    }

    componentDidUpdate() {
        this.getQRCode();
    }

    componentWillUnmount() {
        window.clearInterval(this.scanInterval);
    }

    componentWillUnmount() {
        window.clearInterval(this.scanInterval);
    }

    render() {
        const {labelObj,data} = this.props.state;
        const {qrcode} = data




        return (
            <div>
                <div style={{'marginLeft':'auto','marginRight':'auto','textAlign':'center',height:'165px',width:'280px',}}>
                    <div style={{width:'125px',height:'125px','backgroundColor':'#ffffff','textAlign':'center','verticalAlign':'middle',display:'inline-block'}}>
                                <div style={{display:'inline-block','verticalAlign':'middle'}}>{!!qrcode ? <QRCode ecId={`${this && this.props && this.props.ecId || ''}_QRCode@m1jitx`} value={qrcode.text} size={100} fgColor="#404549" bgColor="#eaeaea"/> : ''}</div>
                                <div style={{display:'inline-block','verticalAlign':'middle',height:'125px'}}></div>

                    </div>
                    <div style={{height:'165px','verticalAlign':'middle',display:'inline-block'}}></div>

                </div>
                <div style={{'marginLeft':'auto','marginRight':'auto','textAlign':'center',height:'20px','marginBottom':'10px',width:'280px'}}>
                         <div  style={{color:'#D5E7E4'}}>{this.props.labelObj().qrcode}</div>
                </div>
            </div>
        );
    }

    getQRCode= ()=> {
        const {qrcode} = this.props.state.data;

        if (qrcode) {
            window.clearInterval(this.scanInterval);
            this.scanInterval = window.setInterval(this.scanQRCode.bind(this), 1000);
        }
    }



    scanQRCode =()=> {
        const {location={}} = this.props
        const {query={}} = location
        const { gopage = '', target = '1' } = query
        const {langId, langText, qrcode} = this.props.state.data;
        const qrcodetimes = this.state.qrcodetimes
        // 统计二维码扫描时间
        if (qrcodetimes> 30) {
            this.setState({qrcodetimes:0}) ;
            this.props.setStateAndCache('loginType', 'form')
        } else {
            this.setState({qrcodetimes:qrcodetimes+1})

            let queryParams = WeaTools.getUrlParams ? WeaTools.getUrlParams(window.location) : query
            queryParams = toJS(queryParams);

            LOGIN_API.login4qc({
                langid: langId,
                loginkey: qrcode.loginkey,
                isie: !!ua.browser === "IE",
                ...queryParams
            }).then((result) => {
                if (result.status == '1') {
                    jQuery.setSessionTimeZone && jQuery.setSessionTimeZone();

                    setLSValue('login', 'langId', langId);
                    setLSValue('login', 'langText', langText);
                    WeaTools.ls.set('languageidweaver', langId);


                    //处理sso 扫码登录
                    if(queryParams && queryParams.appid && queryParams.service){
                        queryParams.authenticationType = 2
                        jQuery("body").append("<form name='ssoForm'></form>");
                        let form = jQuery("form[name='ssoForm']")
                        form.attr("action", '/login/VerifyLoginWeaversso.jsp');
                        form.attr("method", "post");
                        form.attr("style", "display:none");
                        for (let key in queryParams) {
                            form.append("<input type='text' name='" + key + "' value = '" + queryParams[key] + "'></input>");
                        }
                        //跳转到sso
                        form.submit();
                        return;
                    }

                    if (window.top.location.pathname != '/wui/index.html') {
                        window.top.location.href = '/wui/index.html#/main';
                    } else {
                        let pathname = '/main';
                        if (gopage) {
                            pathname += `?gopage=${encodeURIComponent(gopage)}&target=${target}`;
                        }
                        window.top.weaHistory.push({ pathname });
                    }


                }
            });
        }
    }
}

export default E8QRCode;